<template>
  <div class="logistics-details">
    <div class="details-header">
      <div class="header-left">
        <div class="img"><img :src="logisticsDetails.img"></div>
        <div class="info">
          <div class="status">物流状态:
            <span>{{logisticsStatus[details.deliverystatus || 0]}}</span>
          </div>
          <div class="code">运单编号:{{details.number || '未知'}}</div>
          <div class="company">物流公司:{{details.type || '未知'}}</div>
        </div>
      </div>
      <div class="header-right">
        <div class="copy"
             id="btn">复制</div>
      </div>
    </div>
    <div class="details-dividing-big"></div>
    <div class="details-wlgz">物流跟踪</div>
    <div class="details-flow">
      <ul>
        <li v-for="(item,index) of itemList"
            :key="index">
          <logisticscell :flow='item.status'
                         :index='index'
                         :time='item.time'></logisticscell>
        </li>
      </ul>
      <error-page :imgWidth="100"
                  :imgHeight="88"
                  emptyImg="empty-logistics"
                  :type="'text'"
                  top="266"
                  :emptyDesc="showEmptyMsg"
                  v-if="showEmpty" />
      <error-page :imgWidth="301"
                  :imgHeight="241"
                  emptyImg="loading.gif"
                  :type="'other'"
                  top="266"
                  v-if="showLoading" />
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins'
import logisticscell from './logistics-cell'
import ErrorPage from '@/components/error-page'
export default {
  mixins: [mixins],
  name: 'logistics-details',
  data () {
    return {
      statusstr: '',
      status: '0',
      orderid: '',
      details: {},
      itemList: [],
      errorMsg: '',
      showLoading: true,
      logisticsDetails: {},
      logisticsStatus: ['未知', '在途中', '派件中', '已签收', '派送失败']
    }
  },
  mounted () {
    this.orderid = this.$route.query.orderid
    this.requestNet()
    this.copyListener()
    this.requistList()
  },
  computed: {
    showEmptyMsg () {
      let msg = '获取不到物流信息~'
      if (this.errorMsg) {
        msg = this.errorMsg
      }
      return '<span style= "color: RGBA(153, 153, 153, 1);font-size: 0.28rem">' + msg + '</span>'
    },
    showEmpty () {
      if (this.itemList && this.itemList.length > 0) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    async requistList () {
      let details = this.logisticsDetails
      if (details.logisticscode && details.logisticsnumber) {
        let self = this
        self.showLoading = true
        // eslint-disable-next-line
        let promise = new Promise( async function (resolve, reject) {
          try {
            let itemList = await self.$ajax.get('/tOrderLogistics/kuaididetail.json', {
              logisticscode: self.logisticsDetails.logisticscode,
              logisticsnumber: self.logisticsDetails.logisticsnumber
            })
            resolve(itemList)
          } catch (e) {
            reject(e)
          }
        })
        promise.then(function (val) {
          // let val = this.mockData()
          this.errorMsg = val.msg
          if (val.status - '0' === 0) {
            this.itemList = (val.result && val.result.list) || []
          } else {
            this.itemList = []
          }
          self.showLoading = false
        }).catch(function (e) {
          // eslint-disable-next-line
          console.error(e)
        })
      } else {
        this.showLoading = false
        // this.showEmpty = true
      }
    },
    copyListener () {
      // 参考网站：https://www.jb51.net/article/135605.htm
      const btn = document.querySelector('#btn')
      btn.addEventListener('click', () => {
        let code = this.logisticsDetails.logisticsnumber
        if (code && code.trim().length > 0) {
          const input = document.createElement('input')
          input.setAttribute('readonly', 'readonly') // 防止ios手机获取焦点弹出键盘
          input.setAttribute('value', this.logisticsDetails.logisticsnumber || '')
          document.body.appendChild(input)
          input.select()
          input.setSelectionRange(0, 9999)// 防止IOS没有选中全部内容
          if (document.execCommand('copy')) {
            document.execCommand('copy')
            this.$toast('复制成功')
          }
          document.body.removeChild(input)
        } else {
          this.$toast('运单编号为空')
        }
      })
    },
    requesNetToGoods: function (payid) {
    },
    mockData () {
      let details =
      {
        'result': {
          'number': '215352763228',
          'deliverystatus': '3',
          'type': 'ZTO',
          'list': [
            {
              'time': '2018-07-09 20:49:26',
              'status': '【广州市】  【广州天河二】（020-38372673、020-38370139、18122121603） 的 小袁 （18122121589） 已揽收'
            },
            {
              'time': '2018-07-09 22:19:22',
              'status': '【广州市】  快件离开 【广州天河二】 发往 【太原中转】'
            },
            {
              'time': '2018-07-10 02:40:04',
              'status': '【广州市】  快件离开 【广州中心】 发往 【太原中转】'
            },
            {
              'time': '2018-07-11 08:43:44',
              'status': '【太原市】  快件到达 【太原中转】'
            },
            {
              'time': '2018-07-11 08:54:36',
              'status': '【太原市】  快件离开 【太原中转】 发往 【太原万科】'
            },
            {
              'time': '2018-07-11 14:24:28',
              'status': '【太原市】  快件到达 【太原万科】'
            },
            {
              'time': '2018-07-11 14:39:22',
              'status': '【太原市】  【太原万科】 的闫东明（17635680043） 正在第1次派件, 请保持电话畅通,并耐心等待'
            },
            {
              'time': '2018-07-11 15:56:00',
              'status': '【太原市】  快件已在 【太原万科】 签收, 签收人: 菜鸟, 如有疑问请电联:17635680043 / 15386999434, 您的快递已经妥投, 如果您对我们的服务感到满意, 请给个五星好评, 鼓励一下我们【请在评价快递员处帮忙点亮五颗星星哦~】'
            }
          ]
        },
        'msg': 'ok',
        'status': '0'
      }
      this.details = details.result
      return details
    },
    async requestNet (payid) {
      this.logisticsDetails = await this.$ajax.get('/tOrderLogistics/orderkuaidi.json', {orderid: this.orderid})
    }
  },
  components: {
    logisticscell,
    ErrorPage
  }
}
</script>

<style lang="stylus" scoped>
.logistics-details {
  .details-header {
    padding: 20px;
    display: flex;
    align-items: center;

    .header-left {
      display: flex;

      .img {
        width: 150px;
        height: 150px;

        img {
          width: 150px;
          height: 150px;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        font-size: 24px;
        color: rgba(51, 51, 51, 1);
        margin-left: 10px;

        .status {
          margin-bottom: 15px;
          margin-top: 11px;

          span {
            color: rgba(80, 144, 193, 1);
          }
        }

        .code {
          margin-bottom: 15px;
        }

        .company {
        }

        .copy-input {
          width: 1px;
          height: 1px;
          background: none;
          border: none;
        }
      }
    }

    .header-right {
      height: 150px;
      display: flex;
      align-items: center;
      flex: 1;
      justify-content: flex-end;

      .copy {
        width: 70px;
        height: 40px;
        border-radius: 2px;
        border: 2px solid;
        font-size: 24px;
        color: rgba(153, 153, 153, 1);
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .details-dividing-big {
    height: 15px;
    width: 100%;
    background: RGBA(248, 248, 248, 1);
  }

  .details-wlgz {
    width: 100%;
    height: 84px;
    display: flex;
    align-items: center;
    font-size: 30px;
    color: #333333;
    margin-left: 25px;
  }
}
</style>
